<template>
    <show-modal :title="title" :loading="loading" width="600px" @cancel="cancel" :isSure="false">
        <a-row class="row_list flex-row">
            <a-col class="col_item card_item left_card" span="12">
                <p class="name">当前液位</p>
                <div class="number_box">
                    <p class="number">{{info.curLevel}}CM</p>
                    <p :class="['tip',info.alarmStatus==0?'normal':'warning']">
                        <field-tag
                            :value="info.alarmStatus"
                            type="value"
                            showType="name"
                            :data="alarmStatus"
                        ></field-tag>
                    </p>
                </div>
            </a-col>
            <a-col class="col_item card_item" span="11">
                <p class="name">余量可用</p>
                <div class="number_box">
                    <p class="number">{{useDays}}天</p>
                </div>
            </a-col>
            <a-col class="col_item" span="12">
                <div class="trend_header flex-row">
                    <span class="title">日液位变化曲线</span>
                    <a-icon type="ordered-list" class="detail_btn" @click="isShowLog=true"/>
                    <a-icon type="line-chart" class="detail_btn" @click="showInfo('day')"/>
                </div>
                <echart-trend :info="info" type="day" style="height:120px;"/>
            </a-col>
            <a-col class="col_item" span="12">
                <div class="trend_header flex-row">
                    <span class="title">周液位变化曲线</span>
                    <a-icon type="line-chart" class="detail_btn" @click="showInfo('week')"/>
                </div>
                <echart-trend :info="info" type="week" style="height:120px;"/>
            </a-col>
            <a-col class="col_item" span="12">
                <div class="trend_header flex-row">
                    <span class="title">月使用量变化曲线</span>
                    <a-icon type="line-chart" class="detail_btn" @click="showInfo('month')"/>
                </div>
                <echart-trend :info="info" type="month" style="height:120px;"/>
            </a-col>
            <a-col class="col_item" span="12">
                <div class="trend_header flex-row">
                    <span class="title">年使用量变化曲线</span>
                    <a-icon type="line-chart" class="detail_btn" @click="showInfo('year')"/>
                </div>
                <echart-trend :info="info" type="year" style="height:120px;"/>
            </a-col>
        </a-row>
        <template v-if="isDetail">
            <trend-item-detail :info="info" :type="itemType" @cancel="isDetail=false"/>
        </template>

        <template v-if="isShowLog">
            <day-for-change :info="info" @cancel="isShowLog=false"/>
        </template>

    </show-modal>
</template>
<script>
import EchartTrend from './EchartTrend'
import TrendItemDetail from './trendItemDetail.vue'
import {alarmStatus} from '../dictionary'
import {remoteCountDays} from '@/api/monitor'
import DayForChange from './dayForChange.vue'

export default {
    name:'MonitorHistory',
    components:{
        EchartTrend,
        TrendItemDetail,
        DayForChange
    },
    props:{
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
        return{
            title:'一号液化罐历史',
            alarmStatus,
            useDays:0,
            loading:false,
            isDetail:false,
            itemType:'',
            isShowLog:false
        }
    },
    created(){
        let {jarName,jarCode,deviceCode} = this.info;
        console.log(this.info)
        this.title = `${jarName}历史`
        this.getLeftDays(jarCode,deviceCode)
    },
    methods:{
        cancel(){
            this.$emit('cancel')
        },
        showInfo(type){
            this.isDetail = true;
            this.itemType = type
        },
        async getLeftDays(jarCode,deviceCode){
            let res = await remoteCountDays({jarCode,deviceCode});
            this.useDays = res.data;
        }
    }
}
</script>
<style lang="scss" scoped>
.row_list{
    flex-wrap: wrap;
}
.col_item{
    width: 255px;
    margin: 0 10px;
    padding: 10px;
    background: #fff;
    margin-bottom: 20px;
    &.card_item{
        padding: 15px;
        border: 1px solid #23B899;
        background: rgba($color: #23B899, $alpha: .1);
        .name{
            font-size: 14px;
            color: #23B899;
        }
        .number_box{
            margin: 20px auto 0;
            text-align: center;
            height: 60px;
            .number{
                font-size: 20px;
                color: #333;
            }
            .tip{
                font-size: 16px;
                color:#333FFF;
                &.warning{
                    color: #ff4d4f;
                }
            }
        }
    }
    &.card_item.left_card{
        border: 1px solid $primary-color;
        background: rgba($color: $primary-color, $alpha: .1);
        .name{
            color: $primary-color;
        }
    }
    .trend_header{
        align-items: center;
        .title{
            flex:1;
            font-size: 15px;
            color: #333;
        }
        .detail_btn{
            margin-left: 10px;
            color: $primary-color;
        }
    }
}
::v-deep .ant-drawer-wrapper-body{
    background: #f2f2f2;
}
</style>